<template>
  <div class="indexpage">
    <div class="header">
    </div>
    <section class="actions">
      <div class="ConnectStatus" v-if="ConnectStatus==false"> 正在连接中 </div>
      <div class="coverIndex">
        <div class="circleBgIndex">
          <div class="bg-img">
            <div class="imgBg" @click="goPath('/ctrlmain')">
              <dl>
                <dt><img src="../img/function/norm/unselected/zhiNengKongZhi.png" alt=""></dt>
                <dt>智能控制</dt>
              </dl>
            </div>
          </div>
        </div>
      </div>
      <div class="list-menu">
        <div class="aui-grid textColor">
          <div class="aui-row">
            <div @click="goPath('/xindian')" class="listBorder" style="border-left:none">
              <div class="list-table">
                <img id="keShiXinLvImg" src="../img/function/norm/checked/keShiXinLv.png" alt="">
                <div id="keShiXinLvDiv">可视心率</div>
              </div>
            </div>
            <div @click="goPath('/pailuan')" class="listBorder"  style="border-right:none">
              <div class="list-table">
                <img id="paiLuanImg" src="../img/function/norm/unselected/paiLuan.png" alt="">
                <div id="paiLuanDiv">排卵</div>
              </div>
            </div>
            <div @click="goPath('/niaojian')" class="listBorder" style="border-left:none">
              <div class="list-table">
                <img id="nianJianImg" src="../img/function/norm/unselected/niaoJian.png" alt="">
                <div id="nianJianDiv">尿检</div>
              </div>
            </div>
            <div @click="goPath('/yunqi')" class="listBorder " style="border-right:none" >
              <div class="list-table">
                <img id="yunQiImg" src="../img/function/norm/unselected/yunQi.png" alt="">
                <div id="yunQiDiv">孕检</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<div id="layerBg">-->
      <!--<div class=" dialog">-->
      <!--<div>小普发现您已长时间未体检了，关爱自己，是否现在开始体检？</div>-->
      <!--<div class="aui-content">-->
      <!--<div id="closeDialog" class="aui-pull-left dialogBtn">不了,谢谢</div>-->
      <!--<div class="aui-pull-right dialogBtn">马上检测</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
    </section>
    <!--<Alert-->
    <!--v-if="showAlert"-->
    <!--:showHide="showAlert"-->
    <!--@closeTip="closeTip"-->
    <!--@goToDo="goToDo"-->
    <!--:alertText="alertText"-->
    <!--:LeftText="LeftText"-->
    <!--:RightText="RightText"-->
    <!--&gt;-->
    <!--</Alert>-->
    <!--<Inputk-->
    <!--v-if="showAlert"-->
    <!--:showHide="showAlert"-->
    <!--@closeTip="closeTip"-->
    <!--@goToDo="goToDo"-->
    <!--:alertText="alertText"-->
    <!--:LeftText="LeftText"-->
    <!--:RightText="RightText"-->
    <!--&gt;-->
    <!--</Inputk>-->
    <!--<LoadingInit v-if="showAlertState"></LoadingInit>-->
    <!--<confirm v-if="showConfirm" :title="alertText" @submit="submit" @cancel="cancel"></confirm>-->
    <LoadingInit v-if="showAlertState"></LoadingInit>
    <connectinit v-if="ConnectStatus==false"></connectinit>
  </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
import Loading from '../../common/Loading'
import LoadingInit from '../../common/LoadingInit'
import Alert from '../../common/Alert'
import Inputk from '../../common/Inputk'
import '../css/aui.css'
import '../css/aui-flex.css'

export default {
  name: 'Index',
  data () {
    return {
      'alertText': '小普发现您已长时间未体检了，关爱自己，是否现在开始体检？',
      'LeftText': '不了,谢谢',
      'RightText': '马上检测',
      'showAlert': true
    }
  },
  computed: {
    ...mapState([
      'UserID',
      'ConnectStatus',
      'showAlertState',
      'stateEnd',
      'connectEnd',
      'IsYunjDone',
      'IsConnect',
      'Duuid'
    ])
  },
  components: {
    LoadingInit,
    Loading,
    Alert,
    Inputk
  },
  watch: {
    connectEnd (val) {
      this.stateEnd = val
    },
    stateEnd (val) {
      this.stateEnd = val
    },
    Duuid (val){
      // this.TOTLECALLBACK()
      // window.hilink.openBluetoothAdapter()
      // window.hilink.onBLEConnectionStateChange ("connetState")
      // var deviceId = window.getStorageSync('deviceId')
      // window.hilink.closeBLEConnection(deviceId)
      // window.hilink.createBLEConnection(deviceId)
      // if(this.IsConnect==false){
      //   window.rebuildingValueChange()
      // }
    }
  },
  mounted () {

    // this.TOTLECALLBACK()
    // var u = navigator.userAgent
    // var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
    //
    // if (isiOS === true) {
    //   var err = window.hilink.openBluetoothAdapter()
    //   console.log(err)
    //   sleep(1000)
    // }
    // window.hilink.onBLEConnectionStateChange ("connetState")
    // var re = window.hilink.getCurrentRegisteredDevice('getCurrentRegisteredDeviceM')
  },
  // beforeDestroy: function () {
  //   console.log("我已经离开了！")
  // },
  methods: {
    ...mapMutations([ 'WTGYJ', 'SETValueChangeType', 'TOTLECALLBACK','SETUSERID','AxiosSetuser',
    ]),
    goToDo () {
    },
    goPath (pa) {
      this.$router.push({path: pa})
    },
    closeTip () {
      this.showAlert = false
    },
    startToCheck () {
      this.WTGYJ({num: 2})
    },
    alertGn () {
      alert('可视心率功能暂未开发')
    },
    initData () {
      // this.TOTLECALLBACK()
      // window.hilink.openBluetoothAdapter()
      // // window.hilink.getConnectedBluetoothDevices('0000ffe0-0000-1000-8000-00805f9b34fb','getConnectedBluetoothDevicesCallback')
      // // window.hilink.onBLECharacteristicValueChange ("ValueChange")
      // window.hilink.onBLEConnectionStateChange ("connetState")
      // var deviceId = window.getStorageSync('deviceId')
      // window.hilink.createBLEConnection(deviceId)
    }
  },
  // destroyed () {
  //   console.log('destroyed')
  //   clearInterval(window.setIntervalId)
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .indexpage{
    height: 100%;
    overflow: hidden;
    background: #288af0;
  }
  .header{
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .actions{
    height: 90%;
  }
  .coverIndex{
    height: 60%;
  }
  .circleBgIndex{
    position: absolute;
    left:0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    height: 60%;
    width: 60%;

  }
  .bg-img{
    width: 100%;
    height: 50%;
    border-radius: 1rem;
    border: 1px solid #ccc;
  }
  .imgBg{
    padding: 1rem;
    border-radius: 1rem;
    background: #259ff4;
    text-align: center;
    margin:0 auto;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transform: scale(0.95,0.95);
    transform: scale(0.95,0.95);
  }
  .imgBg dl dt{
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 14px;
  }
  .imgBg dl dt:last-child{
    margin-top: 1rem;
  }
  .imgBg img{
    width: 50%;
    height: 60%;
  }
  .zhiNeng{
    margin-top: 2rem;
    color: #fff;
    font-size: 16px;
  }
  .list-menu{
    height: 40%;
  }
  .aui-row{
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    height: 100%;
  }
  .textColor{
    height: 100%;
  }
  .listBorder{
    width:50%;
    height: 50%;
    text-align: center;
    display: table;
    z-index: 10;
    border: 1px solid #ccc;
  }
  .list-table{
    display: table-cell;
    vertical-align: middle;
  }
  .listBorder img{
    margin: 0 auto;
    width: 20%;
  }
  .ConnectStatus{
    text-align: center;
    color: red;
  }
</style>
